@function rrem ($args){
  @return ($args/200)+rem
};
.course-list{
  flex:1;
  display: flex;


  &-more{
    display: flex;
    flex:1;
    justify-content: center;
    align-items: center;
  }
  &-buy-box{
    position: absolute;
    display: flex;
    right:0;
    top:0;
    height:rrem(50);
    width:rrem(170);
    border:1px dashed #EE9614;
    background-color: #fbb03d;
    justify-content: center;
    align-items: center;

  }


  .course_name_content{
    padding: rrem(60) rrem(20) rrem(0);
    .course_name_content_main{
      display: flex;
      justify-content: space-between;
      .course_name_content_left{
        width: rrem(260);
        height: rrem(40);
        line-height: rrem(40);
        background: url('../images/bg4.png') no-repeat center top;
        background-size: 100% 100%;
        font-size: rrem(24);
        color: #0681d6;
        position: relative;
        padding-left: rrem(28);
        .course_icon{
          width: rrem(26);
          height: rrem(13);
          position: absolute;
          right: rrem(43);
          top: rrem(15);
          background: url('../images/icon.png') no-repeat center top;
          background-size: 100% 100%;
        }
      }
      .course_name_content_right{
        width: rrem(260);
        height: rrem(40);
        line-height: rrem(40);
        background: url('../images/bg5.png') no-repeat center top;
        background-size: 100% 100%;
        font-size: rrem(24);
        color: #7f7e83;
        position: relative;
        padding-left: rrem(20);
        input{
          width: 100%;
        }
        .course_icon{
          width: rrem(24);
          height: rrem(21);
          position: absolute;
          right: rrem(21);
          top: rrem(10);
          background: url('../images/icon1.png') no-repeat center top;
          background-size: 100% 100%;
        }
      }
    }
    .course_name_lists{
      width: 100%;
      height:rrem(320);
      position: relative;
      margin-top: rrem(17);
      img{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
      }
      .course_name_lists_content{
        position: absolute;
        left: 0;
        top: rrem(20);
        width: 100%;
        height: rrem(300);
        z-index: 10;
        display: flex;
        flex-wrap: wrap;
        padding: rrem(26) rrem(29) rrem(26) rrem(46);
        overflow: scroll;
        
        .course_name_list{
          width: rrem(185);
          height: rrem(76);
          font-size: rrem(16);
          color: #fff;
          background: url('../images/bg7.png') no-repeat center top;
          background-size: 100% 100%;
          margin-right: rrem(40);
          margin-bottom: rrem(10);
          text-align: center;
          padding-right: rrem(40);
          &:nth-of-type(3n){
            margin-right: 0;
          }
        }
      }
    }
   }







  .class-list-title1 {
    display: flex;
    align-items: flex-end;
    padding-left: 20px;
    height: 90px; }
  .btn-active {
    height: 100% !important;
    color: #393935; }
  .class-list-btn {
    flex: 1;
    /*height:76px;*/
    background: #14A39E;
    display: flex;
    flex-direction: column;
    margin: 0 4px;
    outline: none;
    border-style: none;
    padding-top: 5px;
    box-sizing: border-box;
    text-align: center;
    color: #fff;
    position: relative;
    transition: height .3s ease-out; }
  .class-list-btn1 {
    height: rrem(150); }
  .class-list-btn2 {
      height: rrem(90);
    }
  .class-list-title2-container {
    position: absolute;
    top: rrem(100);
    width: 100%; }

  .btn-color1 {
    background-color: #9EA8E8; }
  .btn-color2 {
    background-color: #CEE261; }
  .btn-color3 {
    background-color: #84C3E9; }
  .btn-color4 {
    background-color: #C098BE; }
  .btn-color5 {
    background-color: #45B3BA; }
  .btn-color6 {
    background-color: #71D4DA; }
  .btn-color7 {
    background-color: #FFAACD; }
  .btn-color8 {
    background-color: #FFB666; }
  .btn-color9 {
    background-color: #FF7D95; }
  .btn-color10 {
    background-color: #CEE261; }
  .bold {
    font-weight: bold; }
  .class-list-title2 {
    display: flex;
    align-items: center;
    padding-right: 20px;
    height: rrem(120); }
  .class-list-bottom-img {
    position: absolute;
    bottom: -17px;
    width: 100%;
    height: 18px; }
  &-container{
    flex:1;
    display: flex;
    position: relative;
    flex-direction: column;
  }

  &-title{
    position: relative;
    display: flex;
    flex-direction: column;
    font-size:rrem(24);
    color:#fff;
    margin-top:rrem(120);
  }
  &-header{
    padding:rrem(20);
    display: flex;
    color:#fff;
    font-size: rrem(24);
  }
  &-col1{
    flex:1;
    text-align: center;
  }
  &-box{
    padding:0 rrem(18);
    z-index: 999;
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-top:rrem(100)
  }
  &-item{
    display: flex;

    align-items: center;
  }
  &-price{
    color:#FC233F;
    font-size:rrem(24);
  }
  &-outer-item{
    border:1px dashed #EE9614;
    background-color: rgba(255,255,255,.6);
    padding:rrem(50) rrem(10) rrem(20) rrem(10);
    margin-bottom: rrem(20);
  }
  &-cell{
    display: flex;
    justify-content: flex-end;
    margin-top:rrem(10);
    align-items: center;
    height:rrem(50);
    position: relative;
  }
  &-item-wrapper{
    flex:1;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
  .top-bg1{
    position: absolute;
    width: 100%;
    top:0;
  }

}
.buy-dialog-content{
  padding:rrem(20) rrem(50) rrem(40) rrem(50);

}
.buy-dialog-organ{
  text-align: center;
  color:#EE9614;
  font-size: rrem(34);
}
.buy-dialog-name{
  color:#64C0FF;
  font-size:rrem(24);
  text-align: center;
  line-height: 1.5;
}
.buy-disabled-row{
  display: flex;
  justify-content: flex-end;
  margin-bottom:rrem(20);
  flex-direction: column;
  align-items: flex-end;
  color:#999;
}
.buy-dialog-select-row{
  display: flex;
  justify-content: flex-end;
  margin-bottom:rrem(20);
  colosr:#333;
  &:last-child{
    margin-bottom:0;
  }
  select{
    border:1px solid #64C0FF;
    outline: none;
  }
}
.color-red{
  color:#FC233F;
}
.buy-dialog-info{
  padding:rrem(20);
  &-row{
    display: flex;
    justify-content: space-between;
  }
}
.item-center{
  display: flex;
  align-items: center;
}
.buy-dialog-checked-img{
  height:rrem(24);
  margin-left: rrem(10);
}
.buy-dialog-price{
  text-align: center;
}
.buy-dialog-btn{
  background-color: #EE9614;
  height:rrem(80);
  width: 100%;
  font-size:rrem(34);
  color:#fff;
  &:active{
    background-color: rgba(238,150,20,.8);
  }
}
.buy-dialog-price{
  margin-top:rrem(20)
}
.buy-dialog-discount{
  max-height: rrem(500);
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  margin-bottom:rrem(40)
}
.buy-dialog-discount-title{
  margin-bottom:rrem(40)
}
.buy-dialog-discount-bg{
  height:rrem(224);
  background: url("../images/discount-bg.png");
  background-size: 100% 100%;
  margin-bottom: rrem(20);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
}
.discount-radio{
  position: absolute;
  right:rrem(60)
}
.buy-circle{
  height:rrem(28);
  width:rrem(28);
  border-radius: 100%;
  border:1px solid #fff;
  transform: rotate(45deg);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left:rrem(10);
}
.buy-more{
  height:rrem(12);
  width:rrem(12);
  border-top:1px solid #fff;
  border-right:1px solid #fff;
  margin-left:- rrem(4);
  margin-top:rrem(2);
}
.text-over{
  width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.expand-more{
  height: 10px;
  width: 10px;
  border-bottom: 1px solid #aaa;
  border-left: 1px solid #aaa;
  transform: rotate(-45deg);
  transition:all .3s ease-out;
}
.pack-up{
  transform: rotate(135deg);
}
.color-fff{
  color:#fff;
}